<template>
  <div class="create-overview-module">
    <Title title="概览标签样式配置" style="margin-bottom: 16px" />
    <el-form ref="formDataRef" :model="dataForm" :rules="formRules" label-position="right" label-width="80px">
      <div class="one-cell">
        <el-form-item label="模块样式" prop="moduleType" class="name" style="margin-right: 40px;">
          <el-select v-model="dataForm.moduleType" class="width240" popper-class="global-select-down" size="small" name="layoutNum" @change="onModuleTypeChange">
            <el-option
              v-for="item in moduleTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
      </div>
      <template v-if="dataForm.moduleType === TAG_MODULE_STYLE.RING_MODULE">
        <template v-for="(item, index) in dataForm.ringModuleData">
          <div :key="index" class="one-cell">
            <el-form-item :prop="`moduleName${index}`" class="name" style="margin-right: 16px;">
              <el-input
                v-model="dataForm.ringModuleData[index].moduleName"
                class="width240"
                placeholder="模块名称"
                clearable
                type="text"
                size="small"
                maxlength="50"/>
            </el-form-item>
            <el-form-item :prop="`progress${index}`" label-width="0" class="name ring-chart-data" style="margin-right: 16px;">
              <el-select v-model="dataForm.ringModuleData[index].progress" class="width180" clearable placeholder="请选择进度数据" no-data-text="请先配置标签" size="small" popper-class="global-select-down" name="layoutNum" @focus="getTagNames">
                <el-option
                  v-for="(curTag, index) in tagNames"
                  :key="index"
                  :label="curTag.tagName"
                  :value="curTag.uuid"
                />
              </el-select>
            </el-form-item>
            <el-form-item :prop="`target${index}`" label-width="0" size="small" class="ring-chart-data" style="margin-right: 16px;">
              <el-select v-model="dataForm.ringModuleData[index].target" clear="width180" clearable placeholder="请选择目标数据" no-data-text="请先配置标签" popper-class="global-select-down" name="layoutNum" @focus="getTagNames">
                <el-option
                  v-for="(curTag, index) in tagNames"
                  :key="index"
                  :label="curTag.tagName"
                  :value="curTag.uuid"
                />
              </el-select>
            </el-form-item>
            <SwatchesPopover v-model="dataForm.ringModuleData[index].themeColor" />
            <span v-if="dataForm.ringModuleData.length > 1" class="ring-option-btn ring-del-btn" @click="deleteItem(index)">删除</span>
            <span class="ring-option-btn" @click="ringModuleDataAdd">添加</span>
          </div>
        </template>
      </template>
    </el-form>
    <el-form :model="dataForm" label-position="right" label-width="80px">
      <el-form-item label="模块宽度" size="small" prop="layoutNum" style="margin-top: 6px;">
        <el-select v-model="dataForm.layoutNum" class="width240" popper-class="global-select-down" name="layoutNum">
          <el-option
            v-for="item in layoutOptions"
            :key="item.id"
            :label="item.name"
            :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <StyleSetting
      ref="stySetting"
      :show-module-name="dataForm.moduleType === TAG_MODULE_STYLE.HISTOGRAM_MODULE || dataForm.moduleType === TAG_MODULE_STYLE.PIE_MODULE"
      :is-show-header="false"
      :module="dataForm.moduleType === TAG_MODULE_STYLE.RING_MODULE ? 'ring' : 'tag'" />
  </div>
</template>

<script>
import Title from '@/components/Title';
import { layoutOptions } from '@/filters/status';
import { TAG_MODULE_STYLE } from '@/utils/const/echarts';
import SwatchesPopover from '@/components/ReportManage/chartCreate/module/swatchesPopover';
import StyleSetting from '@/components/ReportManage/chartCreate/commonStySetting/styleDiy';

export default {
  components: { Title, SwatchesPopover, StyleSetting },
  model: {
    prop: 'dataForm',
    event: 'changeData'
  },
  props: {
    dataForm: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      TAG_MODULE_STYLE,
      layoutOptions
    };
  },
  computed: {
    moduleTypeOptions() {
      return [
        { id: TAG_MODULE_STYLE.TAG_MODULE, name: '纯文字' },
        { id: TAG_MODULE_STYLE.NUMBER_MODULE, name: '翻页器' },
        { id: TAG_MODULE_STYLE.RING_MODULE, name: '环形进度图' },
        { id: TAG_MODULE_STYLE.HISTOGRAM_MODULE, name: '柱状图' },
        { id: TAG_MODULE_STYLE.PIE_MODULE, name: '饼图' }
      ];
    },
    formRules() {
      const rules = {
        name: [{ required: true, trigger: 'blur', message: '请填写模块名称' }],
        layoutNum: [{ required: true, trigger: 'change', message: '请选择页面布局展示' }]
      };
      const { ringModuleData } = this.dataForm;
      const validateData = (msg, key) => {
        return (rule, value, callback) => {
          const res = ringModuleData[rule.index][key];
          if (!res || res === '') { callback(new Error(msg)); } else { callback(); }
        };
      };
      ringModuleData && ringModuleData.forEach((i, index) => {
        rules[`moduleName${index}`] = [{ required: true, trigger: 'blur', validator: validateData('请输入模块名称', 'moduleName'), index }];
        rules[`progress${index}`] = [{ required: true, trigger: 'change', validator: validateData('请选择进度数据', 'progress'), index }];
        rules[`target${index}`] = [{ required: true, trigger: 'change', validator: validateData('请选择目标数据', 'target'), index }];
      });
      return rules;
    },
    tagNames() {
      const labelData = this.dataForm.tags || [];
      return labelData.filter(item => item.tagName && item.uuid);
    }
  },
  methods: {
    deleteItem(index) {
      this.dataForm.ringModuleData.splice(index, 1);
      this.changeData();
    },
    ringModuleDataAdd() {
      this.dataForm.ringModuleData.push({ progress: '', target: '', moduleName: '', themeColor: '#406EFF' });
      this.changeData();
    },
    // 切换模块样式类型
    onModuleTypeChange(type) {
      if (type === TAG_MODULE_STYLE.RING_MODULE && (!Array.isArray(this.dataForm.ringModuleData) || !this.dataForm.ringModuleData.length)) {
        this.dataForm.ringModuleData = [{ progress: '', target: '', moduleName: '', themeColor: '#406EFF' }];
        this.changeData();
      }
      if (type !== TAG_MODULE_STYLE.HISTOGRAM_MODULE) {
        this.dataForm.isOrder = false;
      }
    },
    changeData() {
      this.$emit('changeData', this.dataForm);
    },
    // 对外接口
    getTagNames() {
      this.$emit('getTagNames');
    },
    getData() {
      if (this.$refs.stySetting) {
        this.dataForm.styleConfig = this.$refs.stySetting.getStyle();
      }
      this.changeData();
      return JSON.parse(JSON.stringify(this.dataForm));
    },
    setStyleDefault(data) {
      if (this.$refs.stySetting) {
        this.$refs.stySetting.setDefault(data);
      }
    },
    validate() {
      // 提供给父组件来验证完整性
      return new Promise((resolve, reject) => {
        this.$refs.formDataRef.validate(valid => {
          if (valid) {
            resolve(valid);
          } else {
            reject();
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.create-overview-module {
  margin-top: 26px;
  .one-cell {
    display: flex;
  }
  .ring-chart-data {
    ::v-deep .el-select, ::v-deep .el-input__inner {
      width: 180px !important;
    }
  }
}
.ring-option-btn {
  font-size: 14px;
  color: #406EFF;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  user-select: none;
 }
.ring-del-btn {
  color: #192452;
  margin-right: 12px;
}
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
.width180 {
  width: 180px;
  &::v-deep {
    .el-input__inner {
      width: 180px;
    }
  }
}
</style>
